<template>
    <div class="container" ref="containerRef" style="width: 100%; height: 100%"></div>
</template>

<script>
    import * as echarts from 'echarts'
    import echartsMixins from '@/mixins/echartsMixins'
    export default {
        name: 'lines',
        mixins: [echartsMixins],
        props: {
            unit: {
                type: String,
                default: '',
            },
        },
        methods: {
            _$setChartOptions(data) {
                if (!this.chartHook) return
                this.chartHook.clear()
                if (data.length == 0) {
                    this.chartHook.showLoading({
                        text: '暂无数据',
                        showSpinner: false,
                        textColor: '#2c5a8f',
                        maskColor: '#0b2e63',
                        fontSize: '15px',
                    })
                } else {
                    this.chartHook.hideLoading()
                }

                const xAxisData = []
                const planAmount = []
                const actualAmount = []
                data.forEach((item) => {
                    xAxisData.push(item.planDateStr)
                    planAmount.push(item.planAmount || 0)
                    actualAmount.push(item.actualAmount || 0)
                })

                const option = {
                    // color: ['#003AEA', '#00A8FF', '#F5A21D'],
                    color: ['#003AEA', '#ffb21f', '#F5A21D'],
                    tooltip: {
                        trigger: 'axis',
                        formatter: (params) => {
                            let html = params && params.length ? params[0].name : ''
                            params.forEach((item) => {
                                html += `<div>${item.marker} ${item.seriesName}  <span style="display:inline-block;width: 40px"></span> ${item.value} ${this.unit} </div>`
                            })
                            return html
                        },
                    },
                    grid: {
                        top: '18%',
                        left: '2%',
                        right: '5%',
                        bottom: '8%',
                        container: true,
                        containLabel: true,
                    },
                    legend: {
                        textStyle: {
                            color: '#fff',
                        },
                        data: [
                            { name: '能源计划', icon: 'pin', itemStyle: { color: '#003AEA' } },
                            {
                                name: '能源实绩',
                                icon: 'pin',
                                itemStyle: { color: '#ffb21f' },
                            },
                        ],
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,
                        data: xAxisData,
                        axisLine: {
                            lineStyle: {
                                color: '#B0D7FF66',
                            },
                        },
                        axisLabel: {
                            margin: 12,
                            color: '#D8F0FF99',
                        },
                    },
                    yAxis: {
                        type: 'value',
                        name: this.unit,
                        nameTextStyle: {
                            color: '#D8F0FF99',
                            fontSize: 14,
                            nameGap: 20,
                            padding: [100, 0, 0, 10],
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#B0D7FF66',
                            },
                        },
                        axisLabel: {
                            fontSize: 13,
                            color: '#D8F0FF99',
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#2c5a8f',
                                type: 'dashed',
                            },
                        },
                    },
                    series: [
                        {
                            name: '能源计划',
                            data: planAmount,
                            type: 'bar',
                            barWidth: 24,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: 'rgba(0, 58, 234, 1)' },
                                    { offset: 0.5, color: 'rgba(0, 58, 234, .5)' },
                                    { offset: 1, color: 'rgba(0, 58, 234, 0.01)' },
                                ]),
                            },
                        },
                        {
                            name: '能源实绩',
                            data: actualAmount,
                            type: 'bar',
                            barWidth: 24,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    // { offset: 0, color: 'rgba(43, 142, 255, 1)' },
                                    // { offset: 0.5, color: 'rgba(43, 142, 255, .5)' },
                                    // { offset: 1, color: 'rgba(43, 142, 255, 0.01)' },
                                    { offset: 0, color: 'rgba(255, 178, 31, 1)' },
                                    { offset: 0.5, color: 'rgba(255, 178, 31, .5)' },
                                    { offset: 1, color: 'rgba(255, 178, 31, 0.01)' },
                                ]),
                            },
                        },
                        // {
                        //     name: '能源预测',
                        //     data: amount,
                        //     type: 'bar',
                        //     barWidth: 24,
                        //     areaStyle: {
                        //         opacity: 0.8,
                        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        //             {
                        //                 offset: 0,
                        //                 color: 'rgba(245, 162, 29, 1)',
                        //             },
                        //             {
                        //                 offset: 1,
                        //                 color: 'rgba(251, 207, 62, 0.05)',
                        //             },
                        //         ]),
                        //     },
                        // },
                    ],
                }
                this.chartHook.setOption(option)
                requestAnimationFrame(() => this.chartHook?.resize())
            },
        },
    }
</script>
